<template>
  <div class="app-container">
    <div class="head-container">
      <public-header />
    </div>

    <div class="body-cointaner">
      <div class="forget-title">
        <span> 忘记密码 </span>
      </div>

      <div class="step-container">
        <el-steps align-center :active="statusActive" finish-status="success">
          <el-step title="验证身份"></el-step>
          <el-step title="重置登录密码"></el-step>
          <el-step title="重置成功"></el-step>
        </el-steps>
      </div>

      <div class="form-container-forget">
        <el-form :model="formData" label-width="150px" class="demo-ruleForm">
          <el-form-item
            label="手机号码 : "
            prop="phoneNumber"
            :rules="[
              {
                required: true,
                message: '手机号码不能为空',
                trigger: 'change',
              },
              {
                type: 'number',
                message: '手机号码必须为数字值',
                trigger: 'change',
              },
            ]"
          >
            <el-input
              type="phoneNumber"
              v-model.number="formData.phoneNumber"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="手机验证码 : "
            prop="verificationCode"
            :rules="[
              {
                required: true,
                message: '手机验证码不能为空',
                trigger: 'change',
              },
            ]"
          >
            <el-input
              type="verificationCode"
              v-model="formData.verificationCode"
              placeholder="请输入验证码"
            >
              <template slot="append"
                ><span class="send">发送验证码</span></template
              >
            </el-input>
          </el-form-item>
          <el-button type="primary">下一步</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      statusActive: 0,
      formData: {
        phoneNumber: "",
        verificationCode: "",
      },
    };
  },
  components: {
    PublicHeader: () => import("../../components/PublicHeader"),
  },
};
</script>

<style lang="less">
.app-container {
  display: flex;
  flex-flow: column;
  .head-container {
    align-self: flex-end;
  }
  .body-cointaner {
    width: 100%;
    max-height: 95%;
    min-height: 95%;
    padding-top: 5%;
    .forget-title {
      color: #24a5e0;
      font-size: 24px;
      padding: 20px 0 30px 0;
      text-align: center;
    }
    .step-container {
      width: 100%;
    }
    .form-container-forget {
      width: 100%;
      .el-form {
        width: 40%;
        margin: 100px auto;
        position: relative;

        .el-form-item__label {
          color: #333;
          font-size: 18px;
          height: 50px;
          line-height: 50px;
        }
        .el-input__inner {
          height: 50px;
          line-height: 50px;
          font-size: 16px;
        }
        .el-input-group__append {
          color: #24a5e0;
          background-color: white;
          cursor: pointer;
          font-size: 16px;
          transition-duration: 0.3s;
          transition-timing-function: ease;
        }
        .el-input-group__append:hover {
          background-color: #5baaeb;
          color: white;
        }
        .el-button {
          width: 400px;
          height: 60px;
          margin-top: 50px;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          font-size: 20px;
          background-color: #24a5e0;
        }
      }
    }
  }
}
</style>
